<template>
  <el-dialog title="会员充值" :visible.sync="visible" class="member-finance">
    <div class="card">
      <div class="title">会员</div>
      <div class="details">
        <el-image fit="cover" :src="member.avatar" class="avatar"></el-image>
        {{ member.nickName }}
      </div>
      <div class="title">信息</div>
      <div class="details">
        <p>手机号: {{ member.phone }}</p>
      </div>
    </div>
    <el-tabs v-model="active">
      <el-tab-pane label="充值积分" name="0">
        <el-form label-width="100px" label-position="left">
          <el-form-item label="当前积分">{{ pointNumber }}</el-form-item>
          <el-form-item label="变化">
            <el-radio-group v-model="pointFormData.type">
              <el-radio :label="item.code" v-for="(item, index) in PointsTypeList" :key="index">{{
                  item.name
                }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="充值数目">
            <el-input v-model="pointFormData.point" placeholder="请输入充值数目" type="number"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
                v-model="pointFormData.memo"
                placeholder="请输入备注"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5 }"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="充值余额" name="1">
        <el-form label-width="100px" label-position="left">
          <el-form-item label="当前余额">{{ balanceNumber }}</el-form-item>
          <el-form-item label="变化">
            <el-radio-group v-model="balanceFormData.type">
              <el-radio :label="item.code" v-for="(item, index) in PointsTypeList" :key="index">{{
                  item.name
                }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="充值数目">
            <el-input v-model="balanceFormData.balance" placeholder="请输入充值数目" type="number"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input placeholder="请输入备注" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <div class="center">
        <el-button type="primary" @click="onConfirm">确定</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {enumList} from "@/api/public.api.js"
import request from "@/common/request"

let callback = null

export default {
  name: "member-finance",
  data() {
    return {
      visible: false,
      member: {},
      active: "0",
      PointsTypeList: [],
      pointFormData: {
        type: "1",
        point: "",
        memo: "",
        memberId: "",
      },
      balanceFormData: {
        type: "1",
        balance: "",
        memo: "",
        memberId: "",
      },
      pointNumber: 0,
      balanceNumber: 0,
    }
  },
  computed: {},
  created() {
    enumList("BalanceSerialType", "member").then(resp => {
      if (resp.code == 0) {
        this.PointsTypeList = resp.data
      }
    })
  },
  methods: {
    show(row, active = "0", cb) {
      this.active = active
      this.visible = true
      this.member = row

      callback = cb

      this.getMemberInfo()
    },

    async getMemberInfo() {
      try {
        const {
          code,
          data,
          msg
        } = await request("get", `/member/memberAccount/infoByMemberId?memberId=` + this.member.id)
        if (code != 0) {
          throw new Error(msg)
        }
        this.balanceNumber = data.balance
      } catch (error) {
        this.$message.error(error.message)
      }
      try {
        const {code, data, msg} = await request("get", `/member/memberPoints/infoByMemberId?memberId=` + this.member.id)
        if (code != 0) {
          throw new Error(msg)
        }
        this.pointNumber = data.balance
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    async onConfirm() {
      try {
        if (this.active == "0") {
          // if (this.pointFormData.point == "" || this.pointFormData.point < 0) {
          // 	throw new Error("请输入积分数目")
          // }
          this.pointFormData.memberId = this.member.id
          const {code, msg} = await request("post", "/member/memberPoints/changePoint", {
            type: this.pointFormData.type,
            balance: this.pointFormData.point,
            memo: this.pointFormData.memo,
            memberId: this.pointFormData.memberId,
          })
          if (code != 0) {
            throw new Error(msg)
          }
        } else {
          if (this.balanceFormData.balance == "" || this.balanceFormData.balance < 0) {
            throw new Error("请输入余额数目")
          }
          this.balanceFormData.memberId = this.member.id
          const {code, msg} = await request("post", "/member/memberAccount/changeAccount", {
            type: this.balanceFormData.type,
            balance: this.balanceFormData.balance,
            memo: this.balanceFormData.memo,
            memberId: this.balanceFormData.memberId,
          })
          if (code != 0) {
            throw new Error(msg)
          }
        }
        callback && callback()
        this.onCancel()
      } catch (error) {
        this.$message.error(error.message || "操作失败")
      }
    },
    onCancel() {
      this.pointFormData.type = "1"
      this.pointFormData.point = ""
      this.pointFormData.memo = ""
      this.balanceFormData.type = "1"
      this.balanceFormData.balance = ""
      this.balanceFormData.memo = ""
      this.visible = false
      callback = null
    },
  },
  components: {},
}
</script>

<style lang="scss" scoped>
.card {
  flex-direction: row;
  padding: 13px 0;

  .title {
    width: 90px;
    flex: none;
    padding-left: 25px;
    font-size: 18px;
    font-weight: 700;
  }

  .details {
    width: 40%;
    font-size: 14px;
    line-height: 2;

    .avatar {
      width: 55px;
      height: 55px;
      margin-right: 20px;
      vertical-align: top;
    }
  }
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
